<template>
  <div class="container">
    <el-container v-if="verifyIphone">
      <el-header>
        <el-row class="title">更换手机号码</el-row>
      </el-header>
      <el-main>
        <el-row>
          <el-col :span="18" :offset="3">
            <ShopStep :data="stepsArr" :active="active" />
          </el-col>
        </el-row>
        <div v-if="active == 0">
          <el-row class="mar-top-30">
            <el-col :span="8" :offset="9">
              <span>已绑定的手机号码：{{ phone }}</span>
            </el-col>
          </el-row>
          <el-row class="mar-top-30">
            <el-col class="flex-row-plus" :span="5" :offset="8">
              <el-input class="codeipt" v-model="verifyCode" placeholder="验证码"></el-input>
            </el-col>
            <el-col class="flex-row-plus" :span="3">
              <el-button v-if="isoldCodeShow" class="codebut" @click="getoldCode">{{ oldcodeText }}</el-button>
              <el-button v-else class="codebut codeDisable">{{
                oldcodeText
              }}</el-button>
            </el-col>
          </el-row>
          <el-row class="mar-top-30">
            <el-col class="flex-row-plus" :span="4" :offset="10">
              <el-button class="submitBut" @click="checkUser" type="primary">下一步</el-button>
            </el-col>
          </el-row>
        </div>
        <div v-if="active == 1">
          <el-row class="mar-top-30">
            <el-col :span="8" :offset="8">
              <el-input class="codeipt" type="number" v-model="iphoneNum" placeholder="输入新号码"></el-input>
            </el-col>
          </el-row>
          <el-row class="mar-top-30">
            <el-col class="flex-row-plus" :span="5" :offset="8">
              <el-input class="codeipt" type="number" v-model="code" placeholder="验证码"></el-input>
            </el-col>
            <el-col class="flex-row-plus" :span="3">
              <el-button v-if="isCodeShow" class="codebut" @click="getCode(1)">{{ codeText }}</el-button>
              <el-button v-else class="codebut codeDisable" type="primary">{{
                codeText
              }}</el-button>
            </el-col>
          </el-row>
          <el-row class="mar-top-30">
            <el-col class="flex-row-plus" :span="4" :offset="10">
              <el-button class="submitBut" @click="updatePhone" type="primary" v-throttle>提交</el-button>
            </el-col>
          </el-row>
        </div>
        <div v-if="active == 2" style="margin:70px 0">
          <el-row>
            <el-col :span="8" :offset="8" style="text-align:center;margin-bottom:20px;">
              <icon-svg style="font-size: 120px; margin-bottom: 20px;" icon-class="success" />
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8" :offset="8" style="text-align:center;">
              <span>恭喜您，更换手机已完成！</span>
            </el-col>
          </el-row>
        </div>
      </el-main>
      <el-footer class="mar-top-50">
        <el-row class="flex-column-plus mar-20-30">
          <span class="fs8" style="color:#C83732;font-size:16px;">安全服务提示</span>
          <span class="mar-top-20 fs7 font-color-9A9">•
            绑定手机可提高帐号安全性</span>
          <span class="mar-top-10 fs7 font-color-9A9">• 一个手机号只能绑定一个帐号</span>
        </el-row>
      </el-footer>
    </el-container>
    <div v-else class="mobileBindBox">
      <div class="mobileBind">绑定手机号</div>
      <div class="mobileBindBot">
        <el-form ref="formPassword" label-width="80px">
          <el-form-item label="手机号" prop="password">
            <el-input v-model="mobileBindPhone.phone" placeholder="请输入手机号"></el-input>
          </el-form-item>
          <el-form-item label="验证码" prop="newPassword">
            <div style="display:flex;justify-content: space-between;">
              <el-input style="width: 220px;" type="password" v-model="mobileBindPhone.verificationCode" placeholder="请输入验证码">
              </el-input>
              <!-- <span v-show="codeShow" class="codeBtn" @click="getCode">获取验证码</span>
              <span v-show="!codeShow" class="codeBtn codeCount">重新获取({{codeCountNum}}s)</span> -->
              <el-button v-show="codeShow" class="codebut codebut_bind" @click="getCodeNum">获取验证码</el-button>
              <el-button v-show="!codeShow" class="codebut codebut_bind">重新获取({{codeCountNum}}s)</el-button>
            </div>
          </el-form-item>
        </el-form>
        <div class="button_box">
          <el-button style="background: #333333;width: 305px;" type="primary" @click="interventionFn">绑定手机号</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters, mapMutations } from 'vuex'
import ShopStep from '@/components/base/steps.vue'
import { getTheCode } from '@/api/login.js'
import { changePhone, checkUser, updatePhoneAPI, getUserInfo } from '@/api/user/user.js'

export default {
  components: { ShopStep },
  data() {
    return {
      codeShow: true,
      codeCountNum: '',
      mobileBindPhone: {
        phone: '',
        verificationCode: ''
      },
      stepsArr: [
        {
          value: 0,
          label: '身份验证'
        },
        {
          value: 1,
          label: '更换手机号码'
        },
        {
          value: 2,
          label: '完成'
        }
      ],
      active: 0,
      iphoneNum: '',
      code: '',
      codeText: '获取验证码',
      time: 60,
      isCodeShow: true,
      isoldCodeShow: true,
      verifyCode: '',
      oldcodeText: '获取验证码',
      oldtime: 60,
      verifyIphone: '',
      phone: ''
    }
  },
  computed: {
    ...mapGetters([
      'userInfo' // 用户信息
    ])
  },
  created() {
    if (this.userInfo.phone) {
      this.verifyIphone = this.userInfo.phone
    }
    this.phone =
      this.verifyIphone.substr(0, 3) +
      '****' +
      this.verifyIphone.substr(7, this.verifyIphone.split('').length)
  },
  methods: {
    ...mapMutations({
      setSearchObj: 'SET_SEARCHOBJ',
      setUserInfo: 'SET_USERINFO',
      setCartNumber: 'SET_CARTNUMBER',
      setShoppingCart: 'SET_SHOPPINGCART',
      setNewAddress: 'SET_NEWADDRESS',
      setAreaCode: 'SET_AREACODE',
      setNoticeId: 'SET_NOTICEID',
      IS_LOGIN: 'IS_LOGIN'
    }),
    // 个人信息
    async getUserInfoData() {
      const response = await getUserInfo()
      const res = response.data
      if (res.code === '200') {
        this.setUserInfo(res.data)
        if (this.userInfo.phone) {
          this.verifyIphone = this.userInfo.phone
        }
        // this.userInfoData = res.data
      } else {
        this.$message.error('获取个人信息失败！')
      }
    },
    async interventionFn() {
      const res = await updatePhoneAPI(this.mobileBindPhone)
      console.log(res)
      if (res.data.code == 200) {
        this.$message({
          message: '修改成功',
          type: 'success'
        })
        this.mobileBindPhone = {
          phone: '',
          verificationCode: ''
        }
        this.getUserInfoData()
        this.$router.push({ path: '/userInfo' })
        // location.reload()
      } else {
        this.$message({
          message: res.data.message,
          type: 'warning'
        })
      }
    },
    async getCodeNum() {
      const TIME_COUNT = 120
      let reg = /^1[13456789]\d{9}$/
      if (!reg.test(this.mobileBindPhone.phone)) {
        this.$message({
          message: '手机号格式错误',
          type: 'error',
          customClass: 'messageZindex'
        })
        return
      }
      const response = await getTheCode({ phone: this.mobileBindPhone.phone })
      const res = response.data
      if (res.code === '200') {
        // if (TIME_COUNT == 120) {
        if (!this.timerss) {
          this.codeCountNum = TIME_COUNT
          this.codeShow = false
          this.timerss = setInterval(() => {
            if (this.codeCountNum > 0 && this.codeCountNum <= TIME_COUNT) {
              this.codeCountNum--
            } else {
              this.codeShow = true
              clearInterval(this.timerss)
              this.timerss = null
            }
          }, 1000)
        }
        this.$message({
          message: '验证码获取成功',
          type: 'success',
          customClass: 'messageZindex'
        })
      } else {
        this.$message({
          message: res.message,
          type: 'warning',
          customClass: 'messageZindex'
        })
      }
    },
    // 获取更换手机号的验证码
    async getCode() {
      if (
        !/^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/.test(
          this.iphoneNum
        )
      ) {
        this.$message.warning('手机号格式错误请重新输入')
        return
      }
      const response = await getTheCode({ phone: this.verifyIphone })
      const res = response.data
      if (res.code === '200') {
        this.$message.success('验证码获取成功')
        this.timer()
      } else {
        this.$message.warning(res.message)
      }
    },
    // 身份验证
    async checkUser() {
      if (this.verifyCode === '') {
        this.$message.warning('验证码不能为空')
        return
      }
      const response = await checkUser({
        phone: this.verifyIphone,
        verificationCode: this.verifyCode
      })
      const res = response.data
      if (res.code === '200') {
        this.active = 1
      } else {
        this.$message(res.message)
      }
    },
    // 获取身份验证的验证码
    async getoldCode() {
      if (
        !/^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/.test(
          this.verifyIphone
        )
      ) {
        this.$message.warning('手机号格式错误请重新输入')
        return
      }
      const response = await getTheCode({ phone: this.verifyIphone })
      const res = response.data
      if (res.code === '200') {
        this.$message({
          message: '验证码获取成功',
          type: 'success'
        })
        this.oldtimer()
      } else {
        this.$message({
          message: res.message,
          type: 'warning'
        })
      }
    },
    // 更改手机号
    async updatePhone() {
      if (
        !/^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/.test(
          this.iphoneNum
        )
      ) {
        this.$message.warning('手机号格式错误请重新输入')
        return
      }
      if (this.code === '') {
        this.$message.warning('验证码不能为空')
        return
      }
      const response = await changePhone({
        phone: this.iphoneNum,
        verificationCode: this.code
      })
      const res = response.data
      if (res.code === '200') {
        this.active = 2
      } else {
        this.$message.warning(res.message)
      }
    },
    // 获取身份验证的验证码倒计时
    timer() {
      if (this.time > 0) {
        this.time--
        this.codeText = this.time + 's'
        setTimeout(this.timer, 1000)
        this.isCodeShow = false
      } else {
        this.time = 0
        this.codeText = '获取验证码'
        this.isCodeShow = true
      }
    },
    // 获取更换手机号的验证码倒计时
    oldtimer() {
      if (this.oldtime > 0) {
        this.oldtime--
        this.oldcodeText = this.oldtime + 's'
        setTimeout(this.oldtimer, 1000)
        this.isoldCodeShow = false
      } else {
        this.oldtime = 0
        this.oldcodeText = '获取验证码'
        this.isoldCodeShow = true
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.button_box {
  // display: flex;
  // justify-content: center;
  margin-left: 80px;
  margin-top: 50px;
}
.mobileBind {
  padding-left: 28px;
  height: 42px;
  line-height: 42px;
  background: #f5f6f7;
  font-size: 14px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.85);
}
.mobileBindBot {
  width: 500px;
  padding: 30px;
}
.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  box-sizing: border-box;
  border: 1px solid #e5e5e5;
  .el-header {
    padding: 0;
    .title {
      padding: 0 30px;
      line-height: 50px;
      background-color: #fafafa;
    }
  }
  .submitBut {
    width: 400px;
    color: $mainGlod;
    background-color: #333;
    border-radius: 0;
  }
  .codebut {
    padding: 13px 20px;
    width: 100%;
    text-align: center;
    color: #fff;
    background-color: $mainGlod;
    border-radius: 0;
  }
  .codeDisable {
    color: #999;
    cursor: auto;
  }
  .codebut_bind {
    width: 120px;
    padding: 0;
    border-radius: 4px;
  }
  >>> .codeipt {
    .el-input__inner {
      border-radius: 0;
    }
  }
  .bottom-box {
    background-color: #eeeeee;
  }
  >>> .el-footer {
    background-color: #eee;
    height: auto !important;
  }
}
</style>
